<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

    </title>
    <style>
        .music-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .music-item img {
            max-width: 100px;
            margin-right: 20px;
        }

        .music-item button {
            margin-top: 10px;
        }
    </style>

</head>
<body>
<h1>stack—music</h1>
<div>
    <input type="text" id="searchInput" placeholder="Enter song name">
    <button onclick="search()">搜索</button>
</div>

<div id="music-list"></div>

<script>
    // 发送HTTP请求的函数
    function fetchMusicData(keyword) {
        const apiUrl = `http://www.dreamling.top/API/kugou/android_lite/music/api.php?keyword=${encodeURIComponent(keyword)}&n=1&page=1&pagenum=10&br=&format=json&flag=format`;
        const proxyUrl = 'https://api.allorigins.win/raw?url='; // 使用 https://api.allorigins.win/ 作为代理

        fetch(proxyUrl + encodeURIComponent(apiUrl))
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    displayMusicDetails(data.data);
                } else {
                    console.error('Failed to fetch data:', data);
                }
            })
            .catch(error => console.error('Error:', error));
    }

    // 展示音乐详情的函数
    function displayMusicDetails(music) {
        const musicListElement = document.getElementById('music-list');
        musicListElement.innerHTML = '';  // 清空之前的内容

        const musicItem = document.createElement('div');
        musicItem.className = 'music-item';

        const musicInfo = document.createElement('div');
        musicInfo.innerHTML = `
                <h2>${music.SongName}</h2>
                <p>Artist: ${music.SingerName}</p>
                <p>Bitrate: ${music.bitrate}</p>
                <p>File Size: ${music.filesize.size} ${music.filesize.unit[0]}</p>
                <p>Duration: ${music.musicduration} seconds</p>
                <p>Pay: ${music.pay ? 'Yes' : 'No'}</p>
                <p><strong>Actions:</strong></p>
            `;

        const playButton = document.createElement('button');
        playButton.textContent = 'Play Music';
        playButton.onclick = function () {
            playMusic(music.url[0]); // 播放第一个URL的音乐
        };

        const downloadButton = document.createElement('button');
        downloadButton.textContent = 'Download';
        downloadButton.onclick = function () {
            downloadMusic(music.url[1]); // 下载第二个URL的音乐
        };

        musicInfo.appendChild(playButton);
        musicInfo.appendChild(downloadButton);

        musicItem.appendChild(musicInfo);

        musicListElement.appendChild(musicItem);
    }

    // 播放音乐
    function playMusic(url) {
        // 创建音乐播放器
        const audio = new Audio(url);
        audio.play();
    }

    // 下载音乐
    function downloadMusic(url) {
        // 创建一个隐藏的链接并点击它以下载音乐
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 搜索歌曲
    function search() {
        const searchTerm = document.getElementById('searchInput').value.trim();
        if (searchTerm !== '') {
            fetchMusicData(searchTerm);
        } else {
            alert('Please enter a song name');
        }
    }

</script>
</body>
</html>
